<template>
  <div>
    <el-dialog title="提示" :visible.sync="rolesDialog" width="30%" :before-close="handleClose">
      <span>分配权限</span>
      <el-tree show-checkbox :default-checked-keys="Leafkey" :default-expand-all="true" node-key="id" :data="rightslist" :props="defaultProps" ref="treeref"></el-tree>
      <span slot="footer" class="dialog-footer">
        <el-button @click="closeDialog">取 消</el-button>
        <el-button type="primary" @click="closeDialog, addrights(userid)">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { addrights } from '@/api/index.js'
import { mapState, mapMutations } from 'vuex'
export default {
  data() {
    return {
      defaultProps: {
        children: 'children',
        label: 'authName'
      }
    }
  },
  computed: {
    ...mapState({
      rolesDialog: state => state.Roles.rolesDialog,
      rightslist: state => state.Roles.rightslist,
      Leafkey: state => state.Roles.Leafkey,
      userid: state => state.Roles.userid
    })
  },
  methods: {
    ...mapMutations(['changedialog', 'clearLeafkeys', 'getRolesList']),
    closeDialog() {
      this.changedialog(false)
      this.clearLeafkeys()
    },
    async addrights(id) {
      const keys = [...this.$refs.treeref.getCheckedKeys(), ...this.$refs.treeref.getHalfCheckedKeys()]
      const idstr = keys.join(',')
      const { data: res } = await addrights(id, { rids: idstr })
      if (res.meta.status === 200) {
        this.$message.success(res.meta.msg)
        this.getRolesList()
        this.closeDialog()
      }
      // console.log(this.userid)
      console.log(keys)
      console.log(res)
    },
    handleClose() {
      this.$confirm('确认关闭？')
        .then(_ => {
          this.closeDialog()

          // console.log(this.Leafkey)
        })
        .catch(_ => {})
    }
  }
}
</script>

<style></style>
